<template>
  <div class="translate_container">
    <div class="textTranslate">
      <div class="source">
        <el-select
          style="margin-bottom: 10px; width: 100%"
          v-model="from"
          placeholder="请选择源语言"
          size="small"
        >
          <el-option
            v-for="item in optionsFrom"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="question"
          maxlength="5000"
          rows="25"
          placeholder="请输入要翻译的文本"
          show-word-limit
          type="textarea"
        />
      </div>
      <div class="resizer">
        <div class="color_divider_border"></div>
      </div>
      <div class="target">
        <el-select
          style="margin-bottom: 10px; width: 100%"
          v-model="to"
          placeholder="请选择目标语言"
          size="small"
        >
          <el-option
            v-for="item in optionsFrom"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div style="position: relative">
          <el-input v-model="answer" rows="25" type="textarea" readonly />
          <el-icon
            @click="copyAnswer(answer)"
            style="float: right; position: absolute; right: 10px; top: 10px"
          >
            <DocumentCopy />
          </el-icon>
        </div>
      </div>
    </div>
    <div class="btn">
      <el-button style="width: 100%" round @click="handleReast">重置</el-button>
      <el-button
        style="width: 100%"
        type="primary"
        round
        @click="handleTranslate"
        >翻译</el-button
      >
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { reqTranslate } from "@/api/user/translate";
import { DocumentCopy } from "@element-plus/icons-vue";
import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();
const from = ref("zh");
const to = ref("en");
const question = ref("");
const answer = ref("");
const optionsFrom = ref([
  { value: "zh", label: "中文" },
  { value: "en", label: "英文" },
  { value: "jp", label: "日文" },
  { value: "kor", label: "韩文" },
  { value: "ru", label: "俄文" },
]);
//翻译
const handleTranslate = async () => {
  if (!question.value) {
    ElMessage({
      message: "要翻译的内容不能为空！",
      type: "error",
    });
    return;
  }
  const res = await reqTranslate({
    from: from.value,
    to: to.value,
    question: question.value,
  });
  if (res.code === 200) {
    const parse = JSON.parse(res.data);
    answer.value = parse.result.trans_result[0].dst;
  } else {
    ElMessage({
      message: res.msg,
      type: "error",
    });
  }
};
//重置
const handleReast = () => {
  from.value = "zh";
  to.value = "en";
  question.value = "";
  answer.value = "";
};
//复制
const copyAnswer = async (copyData: any) => {
  if (copyData === "") {
    ElMessage.warning("请输入文本翻译再复制");
    return;
  }
  try {
    await toClipboard(copyData);
    ElMessage.success(`复制: ${copyData} 成功！`);
  } catch (error) {
    ElMessage.warning(`复制失败: ${error} ！`);
  }
};
</script>
<style lang="scss" scoped>
.translate_container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 10px 20px;

  .textTranslate {
    display: flex;
    justify-content: space-between;

    .source {
      width: 100%;
    }

    .resizer {
      width: 10%;
      display: flex;
      justify-content: center;

      .color_divider_border {
        margin-top: 10px;
        margin-bottom: 10px;
        border-right-width: 1px;
        border-right-style: dashed;
        border-color: #c8c9cc;
      }
    }

    .target {
      width: 100%;
    }
  }
}

.btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  position: fixed;
  bottom: 30px;
  left: 0;
  right: 0;
}
</style>
